<template>
  <div style="display: flex;flex-direction: column;gap: 20px">
    <div style="display: flex;justify-content: center">
      <t-button theme="primary" type="submit" @click="submit">提交</t-button>
    </div>
    <t-table
      rowKey="index"
      :data="data"
      :columns="columns"
      bordered
      hover
      :loading="dataLoading"
      :selected-row-keys="selectedRowKeys"
      @select-change="rehandleSelectChange"
    >
      <template #index="{ rowIndex }">
        {{rowIndex+1}}
      </template>
    <template #fileType="{row}">
      <t-select :options="dict.type.expert_adjunct_type" v-model="row.fileType"></t-select>
    </template>
      <template #fileName="{row}">
        <t-input clearable v-model="row.fileName"></t-input>
      </template>
    </t-table>
    <div style="display: flex" class="btn-group-inline">
     <t-upload :action="action"  @fail="handleFail" @success="handleSuccess" :headers="headers" accept="image/*,.pdf">
       <t-button > <t-icon name="file-add" slot="icon"/>
         增加新附件</t-button>
     </t-upload>
      <t-button @click="upData()">上移</t-button>
      <t-button @click="downData()">下移</t-button>
      <t-button @click="delData()">删除</t-button>
    </div>
  </div>
</template>

<script>
import { VITE_APP_UPLOAD_URL} from '@/api/upload'
import { getToken } from "@/utils/auth";


export default {
  name: "expert-file",
  dicts: ['expert_adjunct_type'],
  data(){
    return {
      action: VITE_APP_UPLOAD_URL,
      headers:{
        Authorization: `Bearer ${getToken()}`,
      },
      selectedRowKeys:[],
      dataLoading: false,
      data:[],
      columns:[
        {
          colKey: 'row-select',
          type: 'single',
          title: "选择",
          width: 64
        },
        {
          colKey: "index",
          title: "序号",
          align: "center",
          width: 90
        },
        {
          colKey: "fileType",
          title: "附件类型",
          align: "center",
        },
        {
          colKey: "fileName",
          title: "附件名称",
          align: "center",
        },
        {
          colKey: "op",
          title: "查看",
          align: "center",
        },
      ]
    }
  },
  methods:{
    rehandleSelectChange(val){
      this.selectedRowKeys = val;
    },
    addData(){
      // this.data.push({
      //   index:this.data.length+1,
      //   keyWords:[],
      // })
    },
    upData(){
      if (this.selectedRowKeys.length<=0){
        this.$message.warning("请选择一行");
        return;
      }
      if (this.data[0].index === this.selectedRowKeys[0]){
        this.$message.warning("已是第一行");
      }else {
        const index = this.data.findIndex((val)=>val.index===this.selectedRowKeys[0])
        this.moveInArray(this.data,index,index-1)
      }
    },
    downData(){
      if (this.selectedRowKeys.length<=0){
        this.$message.warning("请选择一行");
        return;
      }
      if (this.data[this.data.length-1].index === this.selectedRowKeys[0]){
        this.$message.warning("已是最后一行");
      }else {
        const index = this.data.findIndex((val)=>val.index===this.selectedRowKeys[0])
        this.moveInArray(this.data,index,index+1)
      }
    },
    delData(){
      if (this.selectedRowKeys.length<=0){
        this.$message.warning("请选择一行");
        return;
      }
      const index = this.data.findIndex((val)=>val.index===this.selectedRowKeys[0])
      this.data.splice(index, 1)
    },
    moveInArray(arr, ffrom, to){
      // 删除当前的位置
      const item = arr.splice(ffrom, 1);
      // 确保还剩有元素移动
      if (!item.length) {
        this.$message.warning(`There is no item in the array at index ${ffrom}`);
      }
      // 移动元素到指定位置
      arr.splice(to, 0, item[0]);
    },
    submit(){

    },
    handleFail({ file }) {
      this.$message.error(`文件 ${file.name} 上传失败`);
    },
    handleSuccess(context){
      if (context.response.code && context.response.code!==200){
        this.$message.error(`文件 ${context.file.name} 上传失败`);
      }
      //
      this.data.push({
        fileType: "",
        fileName: "",
        sysAttMainIds: []
      })
      // const ids =[]
      // this.files.forEach(val=>{
      //   ids.push(val.response.data.id);
      // });
      // this.$emit("input", ids.join(","));
    }
  }
}
</script>

<style scoped>

</style>
